<template>
  <!-- 返回主页 -->
  <div class="v-but">
    <a @click="tohome" class="return"><i>&#xea50;</i></a>
  </div>
  <!-- 视频 -->
  <div class="container">
    <div class="video">
      <video src="../components/video/video1.mp4" controls loop autoplay muted></video>
      <div class="v-title">趣味剪辑视频</div>
      <div class="v-name">作者：Mred</div>
      <div class="v-p">未经允许，不可商用转载</div>
    </div>
  </div>
  <!-- 励志 -->
  <div class="container">
    <div class="alltitle">励志</div>
    <div class="free">
      <ul>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/23.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/24.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/25.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/26.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/27.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 温馨 -->
  <div class="container foot">
    <div class="alltitle">温馨电影</div>
    <div class="free">
      <ul>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/18.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/19.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/20.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/21.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="free-box">
              <div class="img">
                <img src="../components/images/22.jpg" alt="" />
              </div>
              <div class="f-b"></div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {}
  },
  methods: {
    tohome() {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style>
.v-but {
  padding: 60px 0 0 180px;
  width: 100%;
}

.return {
  color: #ffffff;
  height: 40px;
}
.return i {
  font-weight: 600;
  color: #ffffff;
  font-size: 30px;
  z-index: 1;
}
.video {
  margin-bottom: 40px;
}
.video video {
  width: 100%;
}

.video .v-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.v-name,
.v-p {
  color: #ffffffca;
}

/* free */
.free {
  width: 100%;
}
.free ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.free li {
  width: 18%;
}

.free .img {
  position: relative;
  width: 100%;
}

.free .img img {
  width: 100%;
}

.free-box {
  position: relative;
}
.f-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000025;
}

.free li:hover .f-b {
  display: none;
}

.foot {
  padding-bottom: 50px;
}
</style>